<template>
  <div :style="{
    'outline': volume==0?'unset':'#409eff double thick'
  }" style="height: 100px;width:200px;box-sizing: border-box;position: relative;box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);background: #333333;margin: 5px;display: inline-block;">
    <div v-if="info">
      <!--<div v-if="isMe" class="controls">
        <el-tooltip class="item" effect="dark" content="麦克风" placement="bottom-end">
          <div :class="getClassMic(info.audioProducer)?'button_mic_on':'button_mic_off'" @click="clickMic(info.audioProducer)" class="button button_mic_on"></div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="摄像头" placement="bottom-end">
          <div :class="getClassWebcam(info.videoProducer)?'button_webcam_on':'button_webcam_off'" @click="clickWebcam(info.videoProducer)" class="button button_webcam_on"></div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="屏幕共享" placement="bottom-end">
          <div :class="getClassShare(info.videoProducer)?'button_share_on':'button_share_off'" @click="clickShare(info.videoProducer)" class="button button_share_on"></div>
        </el-tooltip>
      </div>-->
      <div v-if="!isMe" class="indicators">
        <div v-show="info.audioConsumer&&info.audioConsumer.paused||!info.audioConsumer||!audioTrack" class="icon mic-off"></div>
        <div v-show="!info.videoConsumer||!videoTrack" class="icon webcam-off"></div>
      </div>
    </div>
    <video ref='videoElem' autoPlay muted style="height: 100%;width:100%;padding: 0px;margin: 0px;"/>
    <audio ref='audioElem' autoPlay muted style="height: 0px;padding: 0px;margin: 0px;width: 100%;"/>
  </div>
</template>

<script>
  import AudioVolume from './AudioVolume.js'
  export default {
    name: "PeerView",
    props:{
      audioTrack:null,
      videoTrack:null,
      isMe:{
        type:Boolean,
        default:false
      },
      info:{
        type:Object,
        default: null
      }
    },
    data(){
      return {
        audioVolume: null,
        volume: 0,
      }
    },
    methods:{
      initData(audioTrack,videoTrack){
        try{
          const { audioElem, videoElem } = this.$refs;
          if(audioTrack&&!this.audioVolume){
            const audioVolume = new AudioVolume(audioTrack);
            audioVolume.on('volume',(res)=>{
              this.volume = res;
              this.$emit('audioVolume',res);
            })
            this.audioVolume = audioVolume.audioVolumeView();
          }
          if (audioTrack&&audioElem&&!this.isMe) {
            const stream = new MediaStream();
            stream.addTrack(audioTrack);
            audioElem.srcObject = stream;
            audioElem.play().catch((error) => console.warn('audioElem.play() failed:', error));
          }else if(audioElem){
            audioElem.srcObject = null;
          }
          if (videoTrack&&videoElem) {
            const stream = new MediaStream();
            stream.addTrack(videoTrack);
            videoElem.srcObject = stream;
            videoElem.play().catch((error) => console.warn('videoElem.play() failed:%o', error));
          } else if(videoElem){
            videoElem.srcObject = null;
          }
        }catch (e) {
          console.log(e)
        }
      },
      clickMic(audioProducer){
        if(this.getClassMic(audioProducer)){
          this.$emit("muteMic")
        }else{
          this.$emit("unmuteMic")
        }
      },
      clickWebcam(videoProducer){
        if(this.getClassWebcam(videoProducer)){
          this.$emit("disableWebcam")
        }else{
          this.$emit("enableWebcam")
        }
      },
      clickShare(videoProducer){
        if(this.getClassShare(videoProducer)){
          this.$emit("disableShare")
        }else{
          this.$emit("enableShare")
        }
      },
    },
    computed:{
      getTrack(){
        const {audioTrack,videoTrack}=this;
        return { audioTrack,videoTrack }
      },
      getClassMic(){
        return (audioProducer)=>{
          if(audioProducer&&!audioProducer.paused){
            return true;
          }else{
            return false;
          }
        }
      },
      getClassWebcam(){
        return (videoProducer)=>{
          if(videoProducer&&!videoProducer.appData.share&&!videoProducer.paused){
            return true;
          }else{
            return false;
          }
        }
      },
      getClassShare(){
        return (videoProducer)=>{
          if(videoProducer&&videoProducer.appData.share&&!videoProducer.paused){
            return true;
          }else{
            return false;
          }
        }
      },
    },
    watch:{
      getTrack(newValue,oldValue){
        console.log('111',newValue)
        const {audioTrack,videoTrack}=newValue;
        this.initData(audioTrack,videoTrack);
      }
    },
    destroyed() {
      if(this.audioVolume){
        this.audioVolume.close();
      }
    },
    mounted() {
      this.initData(this.audioTrack,this.videoTrack);
    }
  }
</script>

<style scoped>
  .controls{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
  }
  .button{
    flex: 0 0 auto;
    margin: 4px;
    margin-left: 0;
    border-radius: 2px;
    pointer-events: auto;
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    background-color: #ffffff;
    cursor: pointer;
    transition-property: opacity, background-color;
    transition-duration: 0.15s;
    width: 28px;
    height: 28px;
    opacity: 0.85;
  }
  .button_mic_on{
    background-image: url('../assets/img/icon_mic_black_on.svg');
  }
  .button_mic_off{
    background-image: url('../assets/img/icon_mic_white_unsupported.svg');
    background-color: #000000;
  }
  .button_mic_unsupported{
    background-image: url('../assets/img/icon_mic_white_off.svg');
    background-color: #d42241;
  }
  .button_webcam_on{
    background-image: url('../assets/img/icon_webcam_black_on.svg');
  }
  .button_webcam_off{
    background-image: url('../assets/img/icon_webcam_white_on.svg');
    background-color: #000000;
  }
  .button_webcam_unsupported{
    background-image: url('../assets/img/icon_webcam_white_unsupported.svg');
    background-color: #d42241;
  }
  .button_change_on{
    background-image: url('../assets/img/icon_change_webcam_black.svg');
  }
  .button_change_unsupported{
    background-image: url('../assets/img/icon_change_webcam_white_unsupported.svg');
    background-color: #d42241;
  }
  .button_share_on{
    background-image: url('../assets/img/icon_share_black_on.svg');
  }
  .button_share_off{
    background-image: url('../assets/img/icon_share_white_on.svg');
    background-color: #000000;
  }
  .button_share_unsupported{
    background-image: url('../assets/img/icon_share_white_unsupported.svg');
    background-color: #d42241;
  }
  .indicators{
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
  }
  .icon{
    flex: 0 0 auto;
    margin: 4px;
    margin-left: 0;
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    transition-property: opacity;
    transition-duration: 0.15s;
    opacity: 0.85;
    background-color: #333333;
  }
  .mic-off{
    background-image: url('../assets/img/icon_remote_mic_white_off.svg');
  }
  .webcam-off{
    background-image: url('../assets/img/icon_remote_webcam_white_off.svg');
  }
</style>
